<template>
    <view class="cont">
        <u-radio-group 
            v-model="internalValue"
            :iconPlacement="iconPlacement"
            :placement="placement">
            <u-radio 
                class="list-item"
                :class="{border:borderStatus}"
                :style="{padding:padding}"
                v-for="(item, index) in list" :key="index"
                :activeColor="activeColor" 
                :name="item.name"
                :label="item.name"
                :disabled="item.disabled"
                :shape="shape"
                @change="radioChange"
            >
                <view class="name-con">
                    <view v-if="item.icon" class="iconfont icon" :class="[item.icon.name]" :style="{color:item.icon.color,fontSize:item.icon.size+'rpx'}"></view>
                    <view class="txt-con">
                        <view class="name" :class="{'disabled':item.disabled}">{{ item.name }}</view>
                        <view class="txt">{{ item.txt }}</view>
                    </view>
                </view>
            </u-radio>
        </u-radio-group>
    </view>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        activeColor: {
            type: String,
            default: 'red'
        },
        iconPlacement: {
            type: String,
            default: 'right'
        },
        placement: {
            type: String,
            default: 'row'
        },
        shape: {
            type: String,
            default: 'circle'
        },
        selectedValue: {
            type: String,
            default: ''
        },
        borderStatus: {
            type: Boolean,
            default: false
        },
        padding: {
            type: String,
            default: '20rpx 32rpx'
        }
    },
    data() {
        return {
            internalValue: this.selectedValue || ''
        }
    },
    watch: {
        selectedValue: {
            immediate: true,
            handler(newValue) {
                this.internalValue = newValue || ''
            }
        },
        list: {
            immediate: true,
            handler(newList) {
                if (this.internalValue) {
                    return
                }
                // 找到默认选中的项
                const activeItem = newList.find(item => item.active);
                if (activeItem) {
                    this.internalValue = activeItem.name;
                }
            }
        }
    },
    methods: {
        radioChange(e) {
            this.internalValue = e
            this.$emit('radioChange', e)
        }
    }
}
</script>
<style lang="scss" scoped>
.cont {
    max-height: 500rpx;
    overflow-y: auto;
}
.icon {
    margin-right: 16rpx;
}
.name-con {
    display: flex;
    align-items: center;
}

.name {
    font-size: 28rpx;
    color: #333333;
}
.disabled {
    color: #999999 !important;
}
.txt {
    font-size: 24rpx;
    color: #999999;
}
.list-item {
    box-sizing: border-box;
    width: 100%;
    &.border{
        border-bottom: 1rpx solid #DDD;
    }

    &:last-child {
        border-bottom: none;
    }
}
</style>